<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="王超凡">
    <link rel="stylesheet" href="./base.css/base.css">
    <title></title>
    <style>
        .daohang {
            width: 100%;
            height: 50px;
            background-color: pink;
        }
        
        .daohang1 {
            width: 1200px;
            height: 50px;
            margin: 0 auto;
        }
        
        .daohang1-1 {
            display: flex;
            justify-content: space-between;
            line-height: 50px;
        }
        
        .xiala1 {
            width: 230px;
            border: 1px solid lightgray;
            font-size: 14px;
            position: absolute;
            top: 50px;
            padding: 10px;
            display: none;
            margin-left: -100px;
        }
        
        .xiala1>li {
            float: left;
            width: 100px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            line-height: 26px;
        }
        
        .xiala1>li:hover {
            color: red;
        }
        
        .xiala1 .tu {
            width: 13px;
            height: 8px;
            background-image: url(./img/2.png);
            background-position: -112px 0;
            position: absolute;
            top: -7px;
            left: calc(50% - 5px);
        }
        
        .daohang1-1>li:hover .xiala1 {
            display: block;
        }
        
        .sanjiao {
            display: inline-block;
            width: 10px;
            height: 5px;
            background-image: url(./img/2.png);
            background-position: -60px 0;
            transition: all 0.3s linear;
            transform-origin: center center;
        }
        
        .daohang1-1>li:hover .sanjiao {
            transform: rotate(180deg);
        }
        .diyige{
            color: blue;
            border-bottom: 2px solid blue;
        }
    </style>
</head>

<body>
    <div class="daohang">
        <div class="daohang1">
            <ul class="daohang1-1">
                <li><a href="" class="diyige">首页</a></li>
                <li><a href="">剧集</a>
                    <ul class="xiala1">
                        <li class="tu"></li>
                        <li>楚乔传 TV版</li>
                        <li>春风十里不如你</li>
                        <li>镇魂街 第一季</li>
                        <li>我的前半生</li>
                        <li>醉玲珑</li>
                        <li>微微一笑很倾城</li>
                        <li>终极三国2017</li>
                        <li>三生三世十里桃花</li>
                    </ul>
                </li>
                <li><a href="">电影</a></li>
                <li><a href="">综艺</a></li>
                <li><a href="">音乐</a></li>
                <li><a href="">少儿</a></li>
                <li><a href="">来疯</a></li>
                <li><a href="">直播</a></li>
                <li><a href="">片库</a></li>
                <li><a href="">咨询</a></li>
                <li><a href="">纪实</a></li>
                <li><a href="">公益</a></li>
                <li><a href="">体育</a></li>
                <li><a href="">汽车</a></li>
                <li><a href="">科技</a></li>
                <li><a href="">财经</a></li>
                <li><a href="">娱乐</a></li>
                <li><a href="">文化</a></li>
                <li><a href="">动漫</a></li>
                <li><a href="">搞笑</a></li>
                <li><a href="">旅游</a></li>
                <li><a href="">时尚</a></li>
                <li><a href="">亲子</a></li>
                <li><a href="">教育</a></li>
                <li><a href="">游戏</a></li>
                <li><a href="">更多<i class="sanjiao"></i></a>
                    <ul class="xiala1">
                        <li class="tu"></li>
                        <li><a href="#">VR</a></li>
                        <li><a href="#">生活</a></li>
                        <li><a href="#">原创</a></li>
                        <li><a href="#">排行</a></li>
                    </ul>
                </li>
            </ul>
        </div>

    </div>

</body>

</html>